<template>
  <view class="page">
    <view class="head">
      <view class="head-title">商品评价</view>
      <uni-rate v-model="rateValue" active-color="#FF4254" />
    </view>
    <view>
      <textarea
        class="easyinput"
        rows="4"
        v-model="textareaValue"
        placeholder="说说您对商品的想法吧"
      ></textarea>
    </view>
    <view class="file">
      <view class="file-title">图片上传</view>
      <view class="file-title1">最多可以传9张图片</view>
      <File
        fileMediatype="image"
        limit="9"
        @select="uploadSelect"
        @progress="uploadProgress"
        @success="uploadSuccess"
        @fail="uploadFail"
        @delete="uploadDelete"
      ></File>
    </view>
    <view class="bottom">
      <button type="default" class="black" @click="submit" :plain="true">
        提交
      </button>
    </view>
  </view>
</template>

<script>
import File from "@/components/file/uni-file-picker.vue";
import { baseUrl } from "@/config";
import orderApi from "@/api/order";

export default {
  name: "evaluate",
  components: {
    File,
  },
  data() {
    return {
      rateValue: 0,
      textareaValue: "",
      imageValue: [],
      orderId: null,
      itemId: null,
      goodId: null,
    };
  },
  onLoad(options) {
    console.log("options---", options);
    this.orderId = options.orderId || null;
    this.itemId = options.itemId || null;
    this.goodId = options.goodId || null;
  },
  onShow() {},
  methods: {
    uploadSelect(e) {
      console.log("e---uploadSelect", e);
      e.tempFilePaths.forEach((item) => {
        uni.uploadFile({
          url: baseUrl + "/common/upload",
          filePath: item,
          name: "file",
          success: (res) => {
            const data = JSON.parse(res.data);
            if (data.code == 200) {
              this.imageValue.push(data.url);
            }
          },
        });
      });
    },
    uploadProgress(e) {
      console.log("e---uploadProgress", e);
    },
    uploadSuccess(e) {
      console.log("e---uploadSuccess", e);
    },
    uploadFail(e) {
      console.log("e---uploadSuccess", e);
    },
    uploadDelete(e) {
      this.imageValue.splice(e.index, 1);
    },
    submit() {
      if (this.rateValue == 0) {
        uni.showToast({
          title: "请评分",
          icon: "none",
        });
        return;
      }
      if (this.textareaValue == "") {
        uni.showToast({
          title: "请输入评论内容",
          icon: "none",
        });
        return;
      }
      let data = {
        orderId: this.orderId,
        itemId: this.itemId,
        goodId: this.goodId,
        productScore: this.rateValue,
        comment: this.textareaValue,
        pics: this.imageValue.join(","),
      };
      orderApi.createComment(data).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: "评价成功",
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  background: #fff;
  width: 100vw;
  height: 100vh;
}

.head {
  display: flex;
  align-items: center;
  width: 750rpx;
  height: 88rpx;
  padding-left: 28rpx;
}

.head-title {
  margin-right: 36rpx;
  color: #000000;
  font-family: "PingFang SC";
  font-size: 28rpx;
  font-style: normal;
  font-weight: 500;
  line-height: 40rpx;
  opacity: 0.9;
}

.easyinput {
  width: 694rpx;
  height: 320rpx;
  flex-shrink: 0;
  border-radius: 24rpx;
  background: #f8f8f8 !important;
  margin: 20rpx 28rpx 40rpx 28rpx;
  padding: 20rpx;
}

.file {
  margin: 0rpx 20rpx 20rpx 20rpx;

  .file-title {
    color: #000000;
    font-family: "PingFang SC";
    font-size: 28rpx;
    font-style: normal;
    font-weight: 500;
    line-height: 40rpx;
    opacity: 0.9;
  }

  .file-title1 {
    color: #000000;
    font-family: "PingFang SC";
    font-size: 20rpx;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    opacity: 0.2;
    margin-bottom: 20rpx;
  }
}
.bottom {
  border-top: 1px solid #dddddd;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 150rpx;
  position: absolute;
  bottom: 0;
  left: 0;

  .black {
    background-color: #000;
    color: #fff;
    border-radius: 25px;
    width: 80%;
  }
}
</style>
